<template>
  <div class="list-table" :style="{height: tableHeight + 'px'}">
    <div class="area-header">
      <span class="area-header-title">{{ $t('未跟踪项目提醒') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
        />
      </el-form-item>
      <el-form-item :label="$t('跟踪时间')" prop="remindTime">
        <DatePicker v-model="remindTimes" type="daterange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <div class="remind-flex flex">
      <div class="flex_li">
        <div class="scroll">
          <div class="head flex">
            <span>{{ $t('重点关注') }}(<span v-html="dealTrackReminderFocusList.length" />)</span>
          </div>
          <div v-for="trackReminder in dealTrackReminderFocusList" :key="trackReminder.index" v-loading="loading" class="content">
            <div class="top flex">
              <span class="company">{{ trackReminder.dealName }}</span>
              <span class="time" v-html="trackReminder.happenTime" />
            </div>
            <div v-if="trackReminder.happenTime" class="middle">
              <div v-html="formatText(trackReminder.details)" />
            </div>
            <div v-if="!trackReminder.happenTime" class="middle">
              <div v-html="formatText($t('暂无跟踪数据'))" />
            </div>
            <div class="bottom flex">
              <span @click="findTrackList(trackReminder)" v-html="$t('全部跟踪')" />
              <span @click="addTracking(trackReminder)" v-html="$t('添加跟踪')" />
            </div>
          </div>

        </div>

      </div>
      <div class="flex_li">
        <div class="scroll">
          <div class="head flex">
            <span>{{ $t('一般关注') }}(<span v-html="dealTrackReminderGeneralList.length" />)</span>
          </div>
          <div v-for="trackReminder in dealTrackReminderGeneralList" :key="trackReminder.index" v-loading="loading" class="content">
            <div class="top flex">
              <span class="company">{{ trackReminder.dealName }}</span>
              <span class="time">{{ trackReminder.happenTime }}</span>
            </div>
            <div v-if="trackReminder.happenTime" class="middle">
              <div v-html="formatText(trackReminder.details)" />
            </div>
            <div v-if="!trackReminder.happenTime" class="middle">
              <div v-html="formatText($t('暂无跟踪数据'))" />
            </div>
            <div class="bottom flex">
              <span @click="findTrackList(trackReminder)" v-html="$t('全部跟踪')" />
              <span @click="addTracking(trackReminder)" v-html="$t('添加跟踪')" />
            </div>
          </div>
        </div>
      </div>
      <div class="flex_li">
        <div class="scroll">
          <div class="head flex">
            <span>{{ $t('保持跟踪') }}(<span v-html="dealTrackReminderKeepList.length" />)</span>
          </div>
          <div v-for="trackReminder in dealTrackReminderKeepList" :key="trackReminder.index" v-loading="loading" class="content">
            <div class="top flex">
              <span class="company">{{ trackReminder.dealName }}</span>
              <span class="time">{{ trackReminder.happenTime }}</span>
            </div>
            <div v-if="trackReminder.happenTime" class="middle">
              <div v-html="formatText(trackReminder.details)" />
            </div>
            <div v-if="!trackReminder.happenTime" class="middle">
              <div v-html="formatText($t('暂无跟踪数据'))" />
            </div>
            <div class="bottom flex">
              <span @click="findTrackList(trackReminder)" v-html="$t('全部跟踪')" />
              <span @click="addTracking(trackReminder)" v-html="$t('添加跟踪')" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加或修改项目跟踪对话框 -->
    <el-dialog :title="$t('项目跟踪')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealTrackForm ref="dealTrackForm" />
    </el-dialog>
    <!--  全部跟踪列表  -->
    <el-dialog
      :title="$t('全部跟踪')"
      :visible.sync="situationOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <dealTrackReportSituation ref="dealTrackReportSituation" />
    </el-dialog>

  </div>
</template>

<script>
import innerHeight from '@/mixins/innerHeight'
import dealTrackForm from './dealTrackForm.vue'
import dealTrackReportSituation from './dealTrackSituationList'
import { listDealTrackReminderMessage } from '@/api/deal/track/dealTrackReminderMessage'
export default {
  components: {
      dealTrackForm,
      dealTrackReportSituation
  },
  mixins: [innerHeight],
  data() {
      return {
        // 遮罩层
        loading: true,
        queryParams: {
          reminderId: undefined,
          dealName: undefined,
          remindPeople: this.$store.state.user.userId,
          startDate: undefined,
          endDate: undefined,
          levelConcern: undefined
        },
        remindTimes: [],
        // 跟踪提醒表格数据
        dealTrackReminderFocusList: [],
        // 跟踪提醒一般关注表格数据
        dealTrackReminderGeneralList: [],
        // 跟踪提醒保持跟踪表格数据
        dealTrackReminderKeepList: [],

        formOpen: false,
        situationOpen: false
      }
  },
  computed: {
    tableHeight() {
      return this.innerHeight - 100
    }
  },
  created() {
    // this.getList()
  },
  mounted() {
    this.$bus.$emit('async_done')
  },
  methods: {
    // 初始化数据
    init(data) {
      debugger
      this.loading = true
      if (data != null && data.id !== undefined) {
        this.queryParams.reminderId = data.id
        this.getList()
      } else {
        this.reset()
        if (this.dealId) {
          this.form.dealId = this.dealId
        } else if (this.$route.query.id) {
          this.form.dealId = this.$route.query.id
        }
        this.loading = false
      }
    },
    /** 查询跟踪提醒列表 */
    getList() {
      this.loading = true
      if (this.remindTimes !== null && this.remindTimes.length > 1) {
        this.queryParams.startDate = this.remindTimes[0]
        this.queryParams.endDate = this.remindTimes[1]
      } else {
        this.queryParams.startDate = undefined
        this.queryParams.endDate = undefined
      }
      // 查询重点关注
      listDealTrackReminderMessage({ levelConcern: 'A', reminderId: this.queryParams.reminderId,
        remindPeople: this.$store.state.user.userId, dealName: this.queryParams.dealName,
        startDate: this.queryParams.startDate, endDate: this.queryParams.endDate }).then(response => {
        this.dealTrackReminderFocusList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
      // 查询一般关注
      listDealTrackReminderMessage({ levelConcern: 'B', reminderId: this.queryParams.reminderId,
        remindPeople: this.$store.state.user.userId, dealName: this.queryParams.dealName,
        startDate: this.queryParams.startDate, endDate: this.queryParams.endDate }).then(response => {
        this.dealTrackReminderGeneralList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
      // 查询保持跟踪
      listDealTrackReminderMessage({ levelConcern: 'C', reminderId: this.queryParams.reminderId,
        remindPeople: this.$store.state.user.userId, dealName: this.queryParams.dealName,
        startDate: this.queryParams.startDate, endDate: this.queryParams.endDate }).then(response => {
        this.dealTrackReminderKeepList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    queryHandle() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.remindTimes = []
      // this.queryHandle()
    },
    formatText(text) {
        var val = text.replace(/\n/g, '</li><li>')
        return '<ul class="ul_style"><li>' + val + '</li></ul>'
    },
    findTrackList(row) {
      this.situationOpen = true
      this.$nextTick(() => {
        this.$refs.dealTrackReportSituation.findHandle(row)
      })
    },
    addTracking(row) {
      this.formOpen = true
      console.log(row)
      this.$nextTick(() => {
        this.$refs.dealTrackForm.remindersInit(row)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll{
  height: calc(100% - 10px);
  overflow: auto;
}
.remind-flex{
  column-gap: 20px;
  align-items: unset!important;
  height: calc(100% - 100px);
  .flex_li{
    // box-shadow: 0 0px 7px 0px #eee;
    flex: 1;
    position: relative;
    padding-top: 20px;
    border-radius: 10px;
    .head{
      padding: 10px;
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
      color: #fff;
      top: -13px;
      left: 10px;
      position: absolute;
      padding: 5px 10px;
      border-radius: 5px;
      span{
        flex: 1;
      }
    }
    .content{
      background: #F5F8FB;
      border-radius: 5px;
      margin: 0 10px 10px;
      padding: 10px;
      .company{
        position: relative;
        flex: 1;
        padding-left: 5px;
        font-weight: bold;
        font-size: 14px;
        &::before{
          position: absolute;
          content: '';
          width: 4px;
          height: 100%;
          background: #DD397A;
          left: -10px;
        }
      }
    }
    .middle{
      margin: 10px 0;
    }
    .bottom{
      border-top: 1px solid #ececec;
      padding-top: 10px;
      span{
        flex: 1;
        text-align: center;
        cursor: pointer;
        color: #46a6ff;
        font-size: 13px;
        &:first-child{
            border-right: 1px solid #ececec;
        }
      }
    }
    &:first-child{
      border: 1px solid rgba(221, 57, 122, .3);
      .head{
        // border-top: 4px solid #DD397A;
        background: #DD397A;
      }
    }
    &:nth-child(2){
      border: 1px solid rgba(253, 111, 52, .3);
      .head{
        background: #FD6F34;
      }
      .company{
        &::before{
          background: #FD6F34;
        }
      }
    }
    &:nth-child(3){
      border: 1px solid rgba(71, 205, 154, .3);
      .head{
        background: #47CD9A;
      }
      .company{
        &::before{
          background: #47CD9A;
        }
      }
    }
  }

}
.flex{
  display: flex;
  align-items: center;
}
/deep/.ul_style{
  padding-left: 20px;
  li{
    list-style: disc;
    line-height: 20px;
    font-size: 13px;
  }
}

</style>
